<template>
    <div>
        <!-- 动态style -->
        <!-- 原理就是利用 v-bind 动态绑定 style属性 -->
        <!-- :style="{css属性名:属性值,css属性名2:属性值}" -->
        <p :style="{ color: str }">我是一个可爱的 P</p>
        <!--将css中-连接改为驼峰命名  -->
        <!-- 如果非要用-连接,可以给属性名加引号 -->
        <p :style="{ color: str, 'background-color': 'green' }">我是第二个可爱的 P</p>
    </div>
</template>

<script>
export default {
    name: 'Two4Style',
    data() {
        return {
            str:'red'
        };
    },
};
</script>

<style scoped>
</style>